<template>
  <div class="order_index">
    <header class="top">
      <span>充值记录</span>
      <span @click="show = true"
        >{{ selected.name }}<span class="icon"></span
      ></span>
    </header>
    <div
      style="text-align: center;margin-top:0.5rem"
      v-if="chargeList.length == 0"
    >
      您暂未此类型消费记录
    </div>
    <section class="center">
      <template v-for="(ele, index) in chargeList">
        <nuxt-link
          class="item"
          tag="div"
          :key="index"
          v-if="ele.usageType == '+'"
          :to="
            `/${enterpriseId}/record/chargeDetail?orderNo=${
              ele.orderNo
            }&cardOilsType=${encodeURIComponent(ele.cardOilsType)}`
          "
        >
          <!-- <div class="item" :key="index" v-if="ele.usageType == '+'"> -->
          <div style="width:100%;display:flex;align-items: center;">
            <div class="left">
              <span class="cont">
                <!-- {{
                ele.usageType == "+" && ele.payType == "cs_pt"? "消费返额": ele.usageType == "+" && ele.payType == "posPr"? "POS赠送": "充值"
              }} -->
                <!-- 规则： 充值对象 + 充值方式 + 加油站名称 -->
                {{ ele.cardOilsType === "0" ? "通用卡" : "" }}
                {{ ele.cardOilsType === "1" ? "汽油卡" : "" }}
                {{ ele.cardOilsType === "2" ? "柴油卡" : "" }}
                {{ ele.cardOilsType === "3" ? "LNG卡" : "" }}
                {{ ele.cardOilsType === "4" ? "CNG卡" : "" }}
                {{ ele.cardOilsType === "s" ? "实体卡" : "" }}
                {{ ele.cardOilsType === "#" ? "超级会员" : "" }}
                -
                {{ ele.payType == "imp" ? "手动增加" : "" }}
                {{ ele.payType == "msub" ? "手动扣减" : "" }}
                {{ ele.payType == "wx" ? "微信充值" : "" }}
                {{ ele.payType == "zfb" ? "支付宝" : "" }}
                {{ ele.payType == "ref" ? "充值退款" : "" }}
                {{ ele.payType == "csRef" ? "消费退款" : "" }}
                {{ ele.payType == "posPr" ? "POS赠送" : "" }}
                {{ ele.payType == "cpRef" ? "消费赠送退款" : "" }}
                {{ ele.payType == "cs_pt" ? "消费返额" : "" }}
                {{ ele.payType == "pos" ? "移动支付" : "" }}
                {{ ele.payType == "" || ele.payType == null ? "电子卡" : "" }}
                -
                {{ ele.stationName }}
              </span>
              <span class="time">{{ ele.createTime }}</span>
            </div>
            <div class="right add">
              + {{ ele.payType === "cs_pt" ? ele.presentAmt : ele.amt }} 元
            </div>
          </div>
        </nuxt-link>
      </template>

      <!--
      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right">- 200 元</div>
      </nuxt-link>


      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right">- 200 元</div>
      </nuxt-link>
      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">充值 - 微信 </span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">+ 200 元</div>
      </nuxt-link>
      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right">- 200 元</div>
      </nuxt-link>
      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">充值 - 微信 </span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">+ 200 元</div>
      </nuxt-link>
      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right">- 200 元</div>
      </nuxt-link>
      <nuxt-link
        class="item"
        :to="'/' + enterpriseId + '/order/details/123'"
        tag="div"
      >
        <div class="left">
          <span class="cont">充值 - 微信 </span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">+ 200 元</div>
      </nuxt-link>
      -->
    </section>
    <footer class="bottom">
      <van-pagination
        v-model="queryForm.pageNum"
        :total-items="total"
        :items-per-page="queryForm.pageSize"
        mode="simple"
        @change="getChargeList"
        v-if="total > queryForm.pageSize"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </footer>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      close-on-click-action
      cancel-text="取消"
    />
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import Vue from "vue";
import { Pagination, Icon, ActionSheet } from "vant";
Vue.use(Icon);
Vue.use(Pagination);
Vue.use(ActionSheet);
Vue.use(ActionSheet);

export default {
  // head() {
  //   return {
  //     title: "充值记录"
  //   };
  // },
  data() {
    return {
      total: 0,
      queryForm: {
        pageNum: 1, //第几页
        pageSize: 10, // 容量
        enterpriseId: undefined,
        mobilePhone: undefined,
        usageType: "1",
        cardOilsType: undefined
      },
      actions: [
        { name: "全部", value: "" },
        { name: "通用卡", value: "0" },
        { name: "汽油卡", value: "1" },
        { name: "柴油卡", value: "2" },
        { name: "CNG卡", value: "3" },
        { name: "LNG卡", value: "4" },
        { name: "实体卡", value: "5" },
        { name: "超级会员", value: "#" }
      ],
      show: false,
      selected: { name: "全部" },
      chargeList: []
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    }),
    ...mapState({
      // pointInfo: (state) => state.point.pointInfo,
    })
  },
  created() {
    this.getChargeList();
  },
  mounted() {
    // this.getPointInfo();
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
    async getChargeList() {
      try {
        this.queryForm.cardOilsType = this.selected.value;
        this.queryForm.enterpriseId = this.enterpriseId;
        this.queryForm.mobilePhone = this.phone;
        const amountData = await this.$axios.$get("/getCardRecordList", {
          params: this.queryForm
        });
        if (amountData.retCode !== 0) {
          throw new Error(amountData.message);
        }

        this.chargeList = amountData.data.list;
        this.total = amountData.data.total;
      } catch (error) {
        alert(error);
      }
    },
    onSelect(q, w, e) {
      console.log(q, w);
      this.selected = q;
      this.getChargeList();
    },
    getList() {}
  }
};
</script>

<style lang="scss" scoped>
.order_index {
  padding: 0.4rem;
  padding-bottom: 0;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .top {
    background-color: #f8f8f8;
    overflow: hidden;
    padding: 0.2rem 0.25rem;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 0.25rem;
    .icon {
      margin-left: 0.1rem;
      display: inline-block;
      width: 0.2rem;
      height: 0.15rem;
      background: url("../../../static/common/1_b01_down.2x.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }
  .center {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    > .item {
      height: 1.9rem;
      padding: 0.3rem 0.25rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .left {
        width: 70%;
        display: flex;
        flex-direction: column;
        .cont {
          color: #292929;
          font-size: 0.26rem;
          font-weight: bold;
          min-height: 0.9rem;
          // line-height: 0.9rem;
        }
        .time {
          color: #9f9f9f;
          font-size: 0.2rem;
          height: 0.4rem;
          line-height: 0.4rem;
        }
      }
      .right {
        width: 25%;
        text-align: right;
        line-height: 1.3rem;
        font-size: 0.26rem;
        font-weight: bold;
      }
      .add {
        color: #c5ac61;
      }
    }
  }
  .bottom {
    width: 100%;
  }
}
</style>
